<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" +
            request.getServerPort() + request.getContextPath() + "/";
%>
<html lang="en">
<head>
    <base href="<%=basePath%>" />
    <meta charset="UTF-8">
    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">
    <script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
    <script type="text/javascript" src="jquery/bs_pagination/en.js"></script>
    <script type="text/javascript">

        <%--模态框，也就是出现一个小框，不用弹出一个新的页面--%>
        $(function(){

            // 页面加载完成时分页查询出数据
            pageList(1,2);

            // 为搜索按钮注册条件查询时间，已完成
            $("#searchBtn").click(function () {

                //单击查询按钮的时候将查询条件全部保存在隐藏域中，
                //$("#hidden-id").val($("#search-id").val());
                $("#hidden-name").val($("#search-name").val());
                $("#hidden-num").val($("#search-num").val());
                $("#hidden-IMO_num").val($("#search-IMO_num").val());
                $("#hidden-type").val($("#search-type").val());
                $("#hidden-owner").val($("#search-owner").val());
                pageList(1,2);
            });

            // 全选框
            $("#qx").on("click",function () {
                $("input[name=xz]").prop("checked",this.checked);
            });

            // 动态生成的标绑定单击事件的用法
            // 下面是外层有效标签的jQuery对象（不是动态生成的标签）
            $("#waterBody").on("click",$("input[name=xz]"),function () {
                // 这里表示选择框的总数量等于被选选择框的数量 那么全选框就勾选 否则就不勾选
                $("#qx").prop("checked",$("input[name=xz]").length==$("input[name=xz]:checked").length);
            });

            //更新数据
            // 为修改市场活动模态窗口中的保存按钮绑定事件
            $("#updateBtn").on("click",function(){
                // 拿到需要添加的属性值
                var id = $("#hidden-edit-Id").val();
                var build_time = $("#edit-build_time").val();
                var belong_time = $("#edit-belong_time").val();
                var beginTime = $("#edit-beginTime").val();
                //隐藏域
                var name=$("#hidden-edit-name").val();
                var num=$("#hidden-edit-num").val();
                var everNum=$("#hidden-edit-everNum").val();
                var everName=$("#hidden-edit-everName").val();
                var port=$("#hidden-edit-port").val();
                var everPort=$("#hidden-edit-everPort").val();
                var tel=$("#hidden-edit-tel").val();
                var IMO_num=$("#hidden-edit-IMO_num").val();
                var type=$("#hidden-edit-type").val();
                var cailiao=$("#hidden-edit-cailiao").val();
                var build_place=$("#hidden-edit-build_place").val();
                var value=$("#hidden-edit-value").val();
                var length=$("#hidden-edit-length").val();
                var width=$("#hidden-edit-width").val();
                var depth=$("#hidden-edit-depth").val();
                var allWeight=$("#hidden-edit-allWeight").val();
                var weight=$("#hidden-edit-weight").val();
                var zhuji_type=$("#hidden-edit-zhuji_type").val();
                var zhuji_num=$("#hidden-edit-zhuji_num").val();
                var power=$("#hidden-edit-power").val();
                var tuijinqi_type=$("#hidden-edit-tuijinqi_type").val();
                var tuijinqi_num=$("#hidden-edit-tuijinqi_num").val();
                var boss=$("#hidden-edit-boss").val();
                var home=$("#hidden-edit-home").val();
                var owner=$("#hidden-edit-owner").val();
                var government=$("#hidden-edit-government").val();
                var bianhao=$("#hidden-edit-bianhao").val();


                $.ajax({
                    url:"workbench/ship_zl/updateShip.do",//地址最后写,更改整体数据
                    data:{
                        "id":id,
                        "name":name,
                        "num":num,
                        "everNum":everNum,
                        "everName":everName,
                        "port":port,
                        "everPort":everPort,
                        "tel":tel,
                        "IMO_num":IMO_num,
                        "type":type,
                        "cailiao":cailiao,
                        "build_place":build_place,
                        "build_time":build_time,
                        "value":value,
                        "length":length,
                        "width":width,
                        "depth":depth,
                        "allWeight":allWeight,
                        "weight":weight,
                        "zhuji_type":zhuji_type,
                        "zhuji_num":zhuji_num,
                        "power":power,
                        "tuijinqi_type":tuijinqi_type,
                        "tuijinqi_num":tuijinqi_num,
                        "boss":boss,
                        "home":home,
                        "owner":owner,
                        "belong_time":belong_time,
                        "government":government,
                        "bianhao":bianhao,
                        "beginTime":beginTime,
                    },
                    dataType:"json",
                    type:"post",
                    success:function (data) {
                        // 隐藏模态窗口
                        $("#editWaterModal").modal("hide");
                        if(data.success){
                            // 刷新活动信息列表
                            alert("修改成功！");
                            // 清空模态窗口
                        }else {
                            alert("修改失败！")
                        }

                    }
                });
                // 保持当前页不动
                pageList($("#waterPage").bs_pagination('getOption', 'currentPage')
                    ,$("#waterPage").bs_pagination('getOption', 'rowsPerPage'));
            });


            //更新用户2.0
            $("#editBtn").on("click",function () {

                // 拿到选中的复选框，xz是看选了多少条数据
                var $xz = $("input[name=xz]:checked");
                // var owner ;//所有者owner
                // 没有选择提示用户
                if ($xz.length == 0){
                    alert("请选择需要修改的记录");
                }else if($xz.length >1){
                    alert("请选择最多一条记录");
                }else{
                    // 后台取数据
                    $.ajax({
                        url:"workbench/ship_zl/getShipById.do",//根据ID获得当前用户信息
                        data: {
                            "id":$xz.val()},  // 传入id
                        type:"get",
                        dataType:"json",
                        success:function (data) {


                            $("#edit-build_time").val(data.ship_zlById.build_time);
                            $("#edit-belong_time").val(data.ship_zlById.belong_time);
                            $("#edit-beginTime").val(data.ship_zlById.beginTime);

                            // 隐藏域中保存id
                            $("#hidden-edit-Id").val(data.ship_zlById.id);
                            $("#hidden-edit-name").val(data.ship_zlById.name);
                            $("#hidden-edit-num").val(data.ship_zlById.num);
                            $("#hidden-edit-everNum").val(data.ship_zlById.everNum);
                            $("#hidden-edit-everName").val(data.ship_zlById.everName);
                            $("#hidden-edit-port").val(data.ship_zlById.port);
                            $("#hidden-edit-everPort").val(data.ship_zlById.everPort);
                            $("#hidden-edit-tel").val(data.ship_zlById.tel);
                            $("#hidden-edit-IMO_num").val(data.ship_zlById.IMO_num);
                            $("#hidden-edit-type").val(data.ship_zlById.type);

                            $("#hidden-edit-cailiao").val(data.ship_zlById.cailiao);
                            $("#hidden-edit-build_place").val(data.ship_zlById.build_place);
                            $("#hidden-edit-value").val(data.ship_zlById.value);
                            $("#hidden-edit-length").val(data.ship_zlById.length);
                            $("#hidden-edit-width").val(data.ship_zlById.width);
                            $("#hidden-edit-depth").val(data.ship_zlById.depth);
                            $("#hidden-edit-allWeight").val(data.ship_zlById.allWeight);
                            $("#hidden-edit-weight").val(data.ship_zlById.weight);
                            $("#hidden-edit-zhuji_type").val(data.ship_zlById.zhuji_type);
                            $("#hidden-edit-zhuji_num").val(data.ship_zlById.zhuji_num);

                            $("#hidden-edit-power").val(data.ship_zlById.power);
                            $("#hidden-edit-tuijinqi_type").val(data.ship_zlById.tuijinqi_type);
                            $("#hidden-edit-tuijinqi_num").val(data.ship_zlById.tuijinqi_num);
                            $("#hidden-edit-boss").val(data.ship_zlById.boss);
                            $("#hidden-edit-home").val(data.ship_zlById.home);
                            $("#hidden-edit-owner").val(data.ship_zlById.owner);
                            $("#hidden-edit-government").val(data.ship_zlById.government);
                            $("#hidden-edit-bianhao").val(data.ship_zlById.bianhao);


                        }
                    });
                    //打开模态窗口
                    $("#editWaterModal").modal("show");
                }
            });
            // 打印按钮绑定
            $("#printBtn").click(function () {
                // 给用户一个确定删除的提示
                if (confirm("是否要打印报表")) {
                    // 因为请求参数可能有多个 提前拼接起来
                    $.ajax({
                        url: "workbench/ship_zl/pageList1.do",
                        data: {},
                        type: "get",
                        dataType: "json",
                        success: function (data) {
                            // 获得了一系列数据了
                            if (data.success) {
                                alert("打印成功");

                            } else {

                                alert("打印失败，请重新打印");
                            }
                        }
                    });
                }
            });


//删除用户

            // 为删除按钮绑定事件
            $("#deleteBtn").on("click",function () {

                // 拿到所有选中框的jquery数组
                var $xz = $("input[name=xz]:checked");

                // 一条选中记录都没有 提示用户
                if($xz.length == 0){
                    alert("请选择需要删除的记录");
                }else {

                    // 给用户一个确定删除的提示
                    if(confirm("确定删除所选中的记录吗？id为"+$xz[0].value)){
                        // 因为请求参数可能有多个 提前拼接起来
                        var param =	"";
                        for (var i = 0; i < $xz.length; i++) {
                            param += "id=" + $xz[i].value ;
                            if(	i < $xz.length - 1){
                                param += "&";
                            }
                        }
                        $.ajax({
                            url:"workbench/ship_zl/delete.do",//删除的地址
                            data:param,
                            type:"post",
                            dataType:"json",
                            success:function (data) {
                                // 返回true则删除成功 否则删除失败
                                if(data.success){
                                    alert(data.msg);
                                    pageList( 1 ,$("#waterPage").bs_pagination('getOption', 'rowsPerPage'));
                                    //要修改
                                }else {
                                    // 将所有复选框取消选择
                                    $("#qx").prop("checked",false);
                                    alert(data.msg);
                                }
                            }
                        });
                    }
                }
            });




            //创建用户,已完成
            // 为创建按钮绑定事件 目的是在打开模态窗口的同时绑定一些事件
            $("#addBtn").click(function () {

                $("#createWaterModal").modal("show");
            });




            $("#saveBtn").click(function () {
                // 拿到需要添加的属性值
                //var id = $("#create-marketwaterID").val();
                var name = $("#create-name").val();
                var num = $("#create-num").val();
                var everNum = $("#create-everNum").val();
                var everName = $("#create-everName").val();
                var port = $("#create-port").val();
                var everPort = $("#create-everPort").val();
                var tel = $("#create-tel").val();
                var IMO_num = $("#create-IMO_num").val();
                var type = $("#create-type").val();
                var cailiao = $("#create-cailiao").val();

                var build_place = $("#create-build_place").val();
                var build_time = $("#create-build_time").val();
                var value = $("#create-value").val();
                var length = $("#create-length").val();
                var width = $("#create-width").val();
                var depth = $("#create-depth").val();
                var allWeight = $("#create-allWeight").val();
                var weight = $("#create-weight").val();
                var zhuji_type = $("#create-zhuji_type").val();
                var zhuji_num = $("#create-zhuji_num").val();

                var power = $("#create-power").val();
                var tuijinqi_type = $("#create-tuijinqi_type").val();
                var tuijinqi_num = $("#create-tuijinqi_num").val();
                var boss = $("#create-boss").val();
                var home = $("#create-home").val();
                var owner = $("#create-owner").val();
                var belong_time = $("#create-belong_time").val();
                var government = $("#create-government").val();
                var bianhao = $("#create-bianhao").val();
                var beginTime = $("#create-beginTime").val();




                $.ajax({
                    url:"workbench/ship_zl/saveShip.do",
                    data:{

                        "name":name,
                        "num":num,
                        "everNum":everNum,
                        "everName":everName,
                        "port":port,
                        "everPort":everPort,
                        "tel":tel,
                        "IMO_num":IMO_num,
                        "type":type,
                        "cailiao":cailiao,

                        "build_place":build_place,
                        "build_time":build_time,
                        "value":value,
                        "length":length,
                        "width":width,
                        "depth":depth,
                        "allWeight":allWeight,
                        "weight":weight,
                        "zhuji_type":zhuji_type,
                        "zhuji_num":zhuji_num,

                        "power":power,
                        "tuijinqi_type":tuijinqi_type,
                        "tuijinqi_num":tuijinqi_num,
                        "boss":boss,
                        "home":home,
                        "owner":owner,
                        "belong_time":belong_time,
                        "government":government,
                        "bianhao":bianhao,
                        "beginTime":beginTime,

                    },
                    dataType:"json",
                    type:"post",
                    success:function (data) {

                        if(data.success){
                            // 回到第一页  保持每页记录数量不变
                            pageList(  1  ,$("#waterPage").bs_pagination('getOption', 'rowsPerPage'));

                            // 清空和关闭添加操作的模态窗口
                            $("#createWaterModal").modal("hide");
                            $("#saveForm").get(0).reset();
                        }else {

                            // 保持当前页不动
                            pageList($("#waterPage").bs_pagination('getOption', 'currentPage')
                                ,$("#waterPage").bs_pagination('getOption', 'rowsPerPage'));
                            $("#createwaterModal").modal("hide");
                            alert("添加市场活动失败！")
                        }

                    }
                });
            });
        });






        // 分页查询 展示信息   pageNo传页数 pageSize传每一页的记录条数
        function pageList(pageNo , pageSize) {

            // 将所有复选框取消选择
            $("#qx").prop("checked", false);

            // 每次发送ajax请求的时候 将保存在隐藏域中的查询条件赋值到文本框中的查询条件
            // 可以有效避免查询出错
            //$("#search-id").val($("#hidden-id").val());
            $("#search-name").val($("#hidden-name").val());
            $("#search-num").val($("#hidden-num").val());
            $("#search-IMO_num").val($("#hidden-IMO_num").val());
            $("#search-type").val($("#hidden-type").val());
            $("#search-owner").val($("#hidden-owner").val());

            $.ajax({
                url: "workbench/ship_zl/pageList.do",//分页查询数据，是所有数据
                data: {
                    // 分页查询的条件
                    "pageNo": pageNo,
                    "pageSize": pageSize,
                    // 搜索条件 利用动态sql 有就填 没有就不填
                    "name": $.trim($("#search-name").val()),
                    "num": $.trim($("#search-num").val()),
                    "type": $.trim($("#search-type").val()),
                    "IMO_num": $.trim($("#search-IMO_num").val()),
                    "owner": $.trim($("#search-owner").val()),

                },
                dataType: "json",
                type: "get",
                success: function (data) {
                    // 把数据添加到活动列表中
                    $("#waterTr01").empty();
                    $("#waterTr02").empty();
                    $.each(data.dataList, function (index, element) {//每次显示两行数据
                        if (index == 0) {
                            $("#waterTr01").append("<td><input type='checkbox' name='xz' value='" + element.id + "'/></td>");
                            $("#waterTr01").append("<td>" + element.name + "</td>");
                            $("#waterTr01").append("<td>" + element.num + "</td>");
                            $("#waterTr01").append("<td>" + element.everNum + "</td>");
                            $("#waterTr01").append("<td>" + element.everName + "</td>");
                            $("#waterTr01").append("<td>" + element.port + "</td>");
                            $("#waterTr01").append("<td>" + element.everPort + "</td>");
                            $("#waterTr01").append("<td>" + element.tel + "</td>");
                            $("#waterTr01").append("<td>" + element.IMO_num + "</td>");
                            $("#waterTr01").append("<td>" + element.type + "</td>");
                            $("#waterTr01").append("<td>" + element.cailiao + "</td>");
                            $("#waterTr01").append("<td>" + element.build_place + "</td>");
                            $("#waterTr01").append("<td>" + element.build_time + "</td>");
                            $("#waterTr01").append("<td>" + element.value + "</td>");
                            $("#waterTr01").append("<td>" + element.length + "</td>");
                            $("#waterTr01").append("<td>" + element.width + "</td>");
                            $("#waterTr01").append("<td>" + element.depth + "</td>");
                            $("#waterTr01").append("<td>" + element.allWeight + "</td>");
                            $("#waterTr01").append("<td>" + element.weight + "</td>");
                            $("#waterTr01").append("<td>" + element.zhuji_type + "</td>");
                            $("#waterTr01").append("<td>" + element.zhuji_num + "</td>");
                            $("#waterTr01").append("<td>" + element.power + "</td>");
                            $("#waterTr01").append("<td>" + element.tuijinqi_type + "</td>");
                            $("#waterTr01").append("<td>" + element.tuijinqi_num + "</td>");
                            $("#waterTr01").append("<td>" + element.boss + "</td>");
                            $("#waterTr01").append("<td>" + element.home + "</td>");
                            $("#waterTr01").append("<td>" + element.owner + "</td>");
                            $("#waterTr01").append("<td>" + element.belong_time + "</td>");
                            $("#waterTr01").append("<td>" + element.government + "</td>");
                            $("#waterTr01").append("<td>" + element.bianhao + "</td>");
                            $("#waterTr01").append("<td>" + element.beginTime + "</td>");

                        } else if (index == 1) {
                            $("#waterTr02").append("<td><input type='checkbox' name='xz' value='" + element.id + "'/></td>");
                            $("#waterTr02").append("<td>" + element.name + "</td>");
                            $("#waterTr02").append("<td>" + element.num + "</td>");
                            $("#waterTr02").append("<td>" + element.everNum + "</td>");
                            $("#waterTr02").append("<td>" + element.everName + "</td>");
                            $("#waterTr02").append("<td>" + element.port + "</td>");
                            $("#waterTr02").append("<td>" + element.everPort + "</td>");
                            $("#waterTr02").append("<td>" + element.tel + "</td>");
                            $("#waterTr02").append("<td>" + element.IMO_num + "</td>");
                            $("#waterTr02").append("<td>" + element.type + "</td>");
                            $("#waterTr02").append("<td>" + element.cailiao + "</td>");
                            $("#waterTr02").append("<td>" + element.build_place + "</td>");
                            $("#waterTr02").append("<td>" + element.build_time + "</td>");
                            $("#waterTr02").append("<td>" + element.value + "</td>");
                            $("#waterTr02").append("<td>" + element.length + "</td>");
                            $("#waterTr02").append("<td>" + element.width + "</td>");
                            $("#waterTr02").append("<td>" + element.depth + "</td>");
                            $("#waterTr02").append("<td>" + element.allWeight + "</td>");
                            $("#waterTr02").append("<td>" + element.weight + "</td>");
                            $("#waterTr02").append("<td>" + element.zhuji_type + "</td>");
                            $("#waterTr02").append("<td>" + element.zhuji_num + "</td>");
                            $("#waterTr02").append("<td>" + element.power + "</td>");
                            $("#waterTr02").append("<td>" + element.tuijinqi_type + "</td>");
                            $("#waterTr02").append("<td>" + element.tuijinqi_num + "</td>");
                            $("#waterTr02").append("<td>" + element.boss + "</td>");
                            $("#waterTr02").append("<td>" + element.home + "</td>");
                            $("#waterTr02").append("<td>" + element.owner + "</td>");
                            $("#waterTr02").append("<td>" + element.belong_time + "</td>");
                            $("#waterTr02").append("<td>" + element.government + "</td>");
                            $("#waterTr02").append("<td>" + element.bianhao + "</td>");
                            $("#waterTr02").append("<td>" + element.beginTime + "</td>");
                        }

                    });


                    // 获取总页数 总记录条数除每没一页展示的条数 向上取整
                    var totalPages = Math.ceil(parseFloat(data.totalSize / pageSize));
                    $("#waterPage").bs_pagination({
                        currentPage: pageNo, // 页码
                        rowsPerPage: pageSize, // 每页显示的记录条数
                        maxRowsPerPage: 20, // 每页最多显示的记录条数
                        totalPages: totalPages, // 总页数
                        totalRows: data.totalSize, // 总记录条数

                        visiblePageLinks: 3, // 显示几个卡片

                        showGoToPage: true,
                        showRowsPerPage: true,
                        showRowsInfo: true,
                        showRowsDefaultInfo: true,

                        onChangePage: function (event, data) {
                            pageList(data.currentPage, data.rowsPerPage);
                        }
                    });
                }
            });
        }

    </script>
</head>
<body>
<%--隐藏域 用来保存信息--%>
<%--<input type="hidden" id="hidden-id"/>--%>
<input type="hidden" id="hidden-name"/>
<input type="hidden" id="hidden-num"/>
<input type="hidden" id="hidden-IMO_num"/>
<input type="hidden" id="hidden-type"/>
<input type="hidden" id="hidden-owner"/>


<input type="hidden" id="hidden-edit-Id"/>
<input type="hidden" id="hidden-edit-name"/>
<input type="hidden" id="hidden-edit-num"/>
<input type="hidden" id="hidden-edit-everNum"/>
<input type="hidden" id="hidden-edit-everName"/>
<input type="hidden" id="hidden-edit-port"/>
<input type="hidden" id="hidden-edit-everPort"/>
<input type="hidden" id="hidden-edit-tel"/>
<input type="hidden" id="hidden-edit-IMO_num"/>
<input type="hidden" id="hidden-edit-type"/>

<input type="hidden" id="hidden-edit-cailiao"/>
<input type="hidden" id="hidden-edit-build_place"/>
<input type="hidden" id="hidden-edit-build_time"/>
<input type="hidden" id="hidden-edit-value"/>
<input type="hidden" id="hidden-edit-length"/>
<input type="hidden" id="hidden-edit-width"/>
<input type="hidden" id="hidden-edit-depth"/>
<input type="hidden" id="hidden-edit-allWeight"/>
<input type="hidden" id="hidden-edit-weight"/>
<input type="hidden" id="hidden-edit-zhuji_type"/>

<input type="hidden" id="hidden-edit-zhuji_num"/>
<input type="hidden" id="hidden-edit-power"/>
<input type="hidden" id="hidden-edit-tuijinqi_type"/>
<input type="hidden" id="hidden-edit-tuijinqi_num"/>
<input type="hidden" id="hidden-edit-boss"/>
<input type="hidden" id="hidden-edit-home"/>
<input type="hidden" id="hidden-edit-owner"/>
<input type="hidden" id="hidden-edit-belong_time"/>
<input type="hidden" id="hidden-edit-government"/>
<input type="hidden" id="hidden-edit-bianhao"/>
<input type="hidden" id="hidden-edit-beginTime"/>

<!-- 创建的模态窗口 已完成-->
<div class="modal fade" id="createWaterModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel1">创建船只基本资料</h4>
            </div>
            <div class="modal-body">

                <form id="saveForm" class="form-horizontal" role="form">

                    <div class="form-group">

                        <label for="create-name" class="col-sm-2 control-label">船名<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-name">
                        </div>
                        <label for="create-num" class="col-sm-2 control-label">登记编号</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-num">
                        </div>

                        <label for="create-everNum" class="col-sm-2 control-label ">初次登记号</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="create-everNum">
                        </div>

                        <label for="create-everName" class="col-sm-2 control-label ">曾用名</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="create-everName" >
                        </div>

                        <label for="create-port" class="col-sm-2 control-label">船籍港<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-port">
                        </div>
                        <label for="create-everPort" class="col-sm-2 control-label">原船籍港</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-everPort">
                        </div>

                        <label for="create-tel" class="col-sm-2 control-label ">船舶呼号</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="create-tel">
                        </div>

                        <label for="create-IMO_num" class="col-sm-2 control-label ">IOM编号</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="create-IMO_num" >
                        </div>

                        <label for="create-type" class="col-sm-2 control-label ">船舶种类</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="create-type">
                        </div>

                        <label for="create-cailiao" class="col-sm-2 control-label ">材料</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="create-cailiao" >
                        </div>
                    </div>


                    <div class="form-group">

                        <label for="create-build_place" class="col-sm-2 control-label">建船地点</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-build_place">
                        </div>
                        <label for="create-build_time" class="col-sm-2 control-label">建船时间</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="date" class="form-control" id="create-build_time">
                        </div>

                        <label for="create-value" class="col-sm-2 control-label ">船舶价值</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="create-value">
                        </div>

                        <label for="create-length" class="col-sm-2 control-label ">总长</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="create-length" >
                        </div>

                        <label for="create-width" class="col-sm-2 control-label">型宽<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-width">
                        </div>
                        <label for="create-depth" class="col-sm-2 control-label">型深</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-depth">
                        </div>

                        <label for="create-allWeight" class="col-sm-2 control-label ">总吨</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="create-allWeight">
                        </div>

                        <label for="create-weight" class="col-sm-2 control-label ">净吨</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="create-weight" >
                        </div>

                        <label for="create-zhuji_type" class="col-sm-2 control-label ">主机种类</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="create-zhuji_type">
                        </div>

                        <label for="create-zhuji_num" class="col-sm-2 control-label ">主机数目</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="create-zhuji_num" >
                        </div>
                    </div>


                    <div class="form-group">

                        <label for="create-power" class="col-sm-2 control-label">功率</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-power">
                        </div>
                        <label for="create-tuijinqi_type" class="col-sm-2 control-label">推进器种类</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-tuijinqi_type">
                        </div>

                        <label for="create-tuijinqi_num" class="col-sm-2 control-label ">推进器数目</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="create-tuijinqi_num">
                        </div>

                        <label for="create-boss" class="col-sm-2 control-label ">船舶所有人</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="create-boss" >
                        </div>

                        <label for="create-home" class="col-sm-2 control-label">船舶所有人地址<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-home">
                        </div>
                        <label for="create-owner" class="col-sm-2 control-label">法定代表姓名</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-owner">
                        </div>

                        <label for="create-belong_time" class="col-sm-2 control-label ">取得所有权日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="date" class="form-control time" id="create-belong_time">
                        </div>

                        <label for="create-government" class="col-sm-2 control-label ">签证单位</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="create-government" >
                        </div>

                        <label for="create-bianhao" class="col-sm-2 control-label ">编号</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="create-bianhao">
                        </div>

                        <label for="create-beginTime" class="col-sm-2 control-label ">发证日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="date" class="form-control time" id="create-beginTime" >
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 修改市场活动的模态窗口 -->
<div class="modal fade" id="editWaterModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel2">修改船只基本信息</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form" id="editForm">

                    <div class="form-group">

                        <label for="edit-build_time" class="col-sm-2 control-label">建船时间</label>
                        <div class="col-sm-10" style="width: 300px;height: 50px;">
                            <input type="date" class="form-control" id="edit-build_time">
                        </div>

                        <label for="edit-belong_time" class="col-sm-2 control-label">取得所有权时间</label>
                        <div class="col-sm-10" style="width: 300px;height: 50px;">
                            <input type="date" class="form-control" id="edit-belong_time">
                        </div>
                        <label for="edit-beginTime" class="col-sm-2 control-label">发证日期</label>
                        <div class="col-sm-10" style="width: 300px;height: 50px;">
                            <input type="date" class="form-control" id="edit-beginTime">
                        </div>

                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="updateBtn">更新</button>
            </div>
        </div>
    </div>
</div>



<%--第一步：页面布局--%>
<div>
    <div style="position: relative; left: 10px; top: -10px;">
        <div class="page-header">
            <h3>船只基础信息管理</h3>
        </div>
    </div>
</div>
<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
    <div style="width: 100%; position: absolute;top: 5px; left: 10px;">

        <div class="btn-toolbar" role="toolbar" style="height: 80px;">
            <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
                <div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">船名</div>
                            <input class="form-control" type="text" id="search-name">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">登记编号</div>
                            <input class="form-control" type="text" id="search-num">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">IMO编号</div>
                            <input class="form-control" type="text" id="search-IMO_num">
                        </div>
                    </div>
                </div>
                <div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">船舶种类</div>
                            <input class="form-control" type="text" id="search-type">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">法定代表姓名</div>
                            <input class="form-control" type="text" id="search-owner">
                        </div>
                    </div>
                    <button type="button" id="searchBtn" class="btn btn-default">查询</button>
                </div>


            </form>
        </div>
        <button type="button" id="printBtn" class="btn btn-default">报表打印</button>

        <div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
            <div class="btn-group" style="position: relative; top: 18%;">
                <%--
                三个功能，两个模态窗口，一个下滑菜单
                --%>
                <button type="button" class="btn btn-primary" id="addBtn"><span class="glyphicon glyphicon-plus"></span> 创建</button>
                <button type="button" class="btn btn-default" id="editBtn"><span class="glyphicon glyphicon-pencil"></span> 修改</button><%--data-toggle="modal" data-target="#editwaterModal"--%>
                <button type="button" class="btn btn-danger" id="deleteBtn"><span class="glyphicon glyphicon-minus"></span> 删除</button>
            </div>

        </div>
        <%--			数据显示--%>
        <div style="position: relative;top: 10px;">
            <table class="table table-hover">
                <thead>
                <tr style="color: #B3B3B3;">
                    <td><input type="checkbox" id="qx"/></td>
                    <td>船名</td>
                    <td>登记编号</td>
                    <td>初次登记号</td>
                    <td>曾用名</td>
                    <td>船籍港</td>
                    <td>原船籍港</td>
                    <td>船舶呼号</td>
                    <td>IMO编号</td>
                    <td>船舶种类</td>
                    <td>材料</td>
                    <td>建船地点</td>
                    <td>建船时间</td>
                    <td>船舶价值</td>
                    <td>总长</td>
                    <td>型宽</td>
                    <td>型深</td>
                    <td>总吨</td>
                    <td>净吨</td>
                    <td>主机种类</td>
                    <td>主机数目</td>
                    <td>功率</td>
                    <td>推进器种类</td>
                    <td>推进器数目</td>
                    <td>船舶所有人</td>
                    <td>船舶所有人地址</td>
                    <td>法定代表姓名</td>
                    <td>取得所有权日期</td>
                    <td>签证单位</td>
                    <td>编号</td>
                    <td>发证日期</td>
                </tr>
                </thead>
                <tbody id="waterBody">
                <tr class="active" id="waterTr01">

                </tr>
                <tr class="active" id="waterTr02">


                </tr>
                </tbody>
            </table>
        </div>

        <div style="height: 50px; position: relative;top: 30px;">
            <div id="waterPage">

            </div>
        </div>

    </div>

</div>
</body>
</html>